// var
@battery-prefix-cls     : x-battery;
@battery-color-progress : #46ed31; // #25702d,#46ed31,#0bc806,#4def53,#5db95e
@battery-color-border   : #fff;
@battery-color-outline  : rgba(0, 0, 0, .3);
@battery-color-lightning: #fde61d;
@battery-font-size      : 14px;
@battery-font-color     : #fff;

// mixins

// styles - default
.@{battery-prefix-cls} {
  .flex-center;
  &__icon {
    border: .1em solid @battery-color-border;
    border-radius: .25em;
    padding: .15em;
    background-color: rgba(0, 0, 0, .2);
    outline: 1px solid @battery-color-outline;
    position: relative;
    &_adorn {
      position: absolute;
      border: 1px solid @battery-color-outline;
      background-color: @battery-color-border;
    }
    &_progress {
      background-color: @battery-color-progress;
    }
    .xvu-iconfont {
      position: relative;
      z-index: 2;
      width: 100%;
      height: 100%;
      color: @battery-color-lightning;
      .flex-center;
    }
  }
  &__text {
    margin-left: .5em;
  }
  &-horizontal {
    .@{battery-prefix-cls}__icon {
      width: 1.8em;
      height: 1em;
      &_adorn {
        position: absolute;
        top: 50%;
        right: -.4em;
        width: .3em;
        height: .5em;
        transform: translateY(-50%);
        border-left: none;
      }
      &_progress {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
      }
      .xvu-iconfont {
        font-size: .5em;
      }
    }
  }
  &-vertical {
    .@{battery-prefix-cls}__icon {
      width: 1em;
      height: 1.6em;
      &_adorn {
        position: absolute;
        top: -.4em;
        left: 50%;
        width: .5em;
        height: .3em;
        transform: translateX(-50%);
        border-bottom: none;
      }
      &_progress {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
      }
      .xvu-iconfont {
        font-size: 1em;
      }
    }
  }
}

// styles - more
